<template>
  <view>
    <!-- 最左侧-通知模块业务 -->
    <uv-navbar title="手机号登录" @leftClick="leftClick" height="44rpx"></uv-navbar>
    <template v-if="osType === 'ios'">
      <uv-gap height="90"></uv-gap>
      <!-- 数据： {{ osType }}90 -->
    </template>
    <template v-else>
      <uv-gap height="80"></uv-gap>
      <!-- 数据： {{ osType }}50 -->
    </template>

    <uv-transition :show="data.model === 'phoneLogin'" mode="slide-right">
      <view class="" style="padding: 40rpx">
        <text class="welcomeText">你好，</text>
        <text class="welcomeText">欢迎登录 <text style="color: #3c9cff"> XXX XXX</text></text>
      </view>
      <view style="padding: 40rpx">
        <uv-gap height="10"></uv-gap>
        <uv-input placeholder="请输入手机号码" border="bottom">
          <!-- vue3模式下必须使用v-slot:prefix -->
          <template v-slot:prefix>
            <uv-text text="+86" margin="0 3px 0 0" type="tips"></uv-text>
          </template>
        </uv-input>
        <uv-gap height="10"></uv-gap>
      </view>
      <view style="padding: 40rpx">
        <uv-button type="primary" size="normal" text="获取验证码"></uv-button>
      </view>
      <view class="spcontent">
        <view style="display: inline">
          <text style="font-size: 14px" @click="handleAccountPwdLoginClick">账号登录</text>
          <text class="spacingBar"></text>
          <uv-link href="https://www.uvui.cn" style="font-size: 14px; display: inline" text="去注册"
            :under-line="true"></uv-link>
        </view>
      </view>
    </uv-transition>
    <!-- 中间首页 -->
    <uv-transition :show="data.model === 'accountPwdLogin'" mode="slide-right">
      <view v-if="data.model === 'accountPwdLogin'">
        <view class="" style="padding: 40rpx">
          <text class="welcomeText">你好，</text>
          <text class="welcomeText">欢迎登录
            <text style="color: #3c9cff"> XXX XXX </text>
          </text>
        </view>
        <view style="padding: 40rpx">
          <uv-gap height="10"></uv-gap>
          <uv-input placeholder="请输入用户名" v-model="loginData.userName" border="bottom">
            <!-- vue3模式下必须使用v-slot:prefix -->
          </uv-input>
          <uv-gap height="10"></uv-gap>
          <uv-input placeholder="请输入密码" v-model="loginData.password" type="password" border="bottom">
            <!-- vue3模式下必须使用v-slot:prefix -->
          </uv-input>
        </view>
        <view style="padding: 40rpx">
          <uv-button type="primary" size="normal" text="登录" @click="handleLogin"></uv-button>
        </view>
        <view class="spcontent">
          <view style="display: inline">
            <text style="font-size: 14px" @click="handlePhoneLoginClick">手机号登录</text>
            <text class="spacingBar"></text>
            <uv-link href="https://www.uvui.cn" style="font-size: 14px; display: inline" text="去注册"
              :under-line="true"></uv-link>
          </view>
        </view>
      </view>
    </uv-transition>

    <!-- 最右侧用户登录和用户信息 -->
    <uv-transition :show="data.model === 'wechatLogin'" mode="slide-right">
      微信登录
    </uv-transition>
    <view style="position: fixed; bottom: 200rpx; width: 100%">
      <uv-divider text="第三方登录" style="padding: 40rpx"></uv-divider>
      <view class="spcontent">
        <uv-avatar icon="apple-fill" fontSize="22"></uv-avatar>
        <uv-avatar icon="weixin-fill" fontSize="22" style="margin: 0rpx 80rpx"></uv-avatar>
        <uv-avatar icon="qq-fill" fontSize="22"></uv-avatar>
      </view>
      <view>
        <uv-link href="https://www.uvui.cn" class="spcontent" style="margin-top: 30rpx" text="《用户协议》"></uv-link>
      </view>
    </view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>
  
<script setup lang="ts">
import { ref, reactive } from "vue";
import { getCurrentInstance } from "vue";
import { Md5 } from "ts-md5";
// 可以在组件中的任意位置访问 `store` 变量 ✨
const data = reactive({
  // 默认账号登录
  model: "accountPwdLogin",
  tabbarValue: 1,
});
const loginData = reactive({
  // 默认账号登录
  userName: "",
  password: "",
});
let osType = ref();
osType = uni.$uv.os();
function handleTabbarClick(data1: any) {
  if (data1 === "手机号") {
    getData();
    data.tabbarValue = 0;
    data.model = "phoneLogin";
    // 暂时不进行业务跳转
    // uni.navigateTo({
    // 	url: '/pages/notification/index',
    // 	success: res => {},
    // 	fail: () => {},
    // 	complete: () => {}
    // });
  } else if (data1 === "账号登录") {
    data.tabbarValue = 1;
    data.model = "accountPwdLogin";
  } else if (data1 === "微信登录") {
    data.tabbarValue = 2;
    data.model = "wechatLogin";
  }
  console.log(uni);
  console.log(uni.$uv);
  console.log(uni.$uv.os());
}
function getData() {
  uni.$uv.http.get("/mock/11/idcdevapi/user").then((data: any) => {
    console.log("🚀 ~ uni.$uv.http.get ~ data:", data);
  });
}
/*
 * @Description:  处理登录左侧按钮点击事件
 * @Author: 杨科
 * @Date: 2023-11-27
 * @version: V1.0.0
 * @param:
 * @returns:
 */
function leftClick() {
  console.log("🚀 ~ leftClick ~ leftClick");
  uni.$uv.route("/pages/index/index");
}
/*
 * @Description: 处理账号登录点击事件
 * @Author: 杨科
 * @Date: 2023-11-28
 * @version: V1.0.0
 * @param:
 * @returns:
 */
function handleAccountPwdLoginClick() {
  data.model = "accountPwdLogin";
}
/*
 * @Description: 处理手机号登录点击事件
 * @Author: 杨科
 * @Date: 2023-11-28
 * @version: V1.0.0
 * @param:
 * @returns:
 */
function handlePhoneLoginClick() {
  data.model = "phoneLogin";
}
/*
 * @Description: 处理登录事件
 * @Author: 杨科
 * @Date: 2023-11-30
 * @version: V1.0.0
 * @param:
 * @returns:
 */
function handleLogin() {
  console.log("🚀 ~ handleLogin ~ handleLogin:", handleLogin);
  const sendData = {
    tenantId: "000000",
    username: loginData.userName,
    password: Md5.hashStr(loginData.password),
    grant_type: "password",
    scope: "all",
    type: "account",
  };
  console.log("🚀 ~ handleLogin ~ sendData:", sendData);

  uni.$uv.http
    .post("/blade-auth/oauth/token", sendData, {
      params: sendData,
      header: {
        Authorization: "Basic Y2YtYXBwLWRlbW86Y2ZfYXBwX2RlbW9fc2VjcmV0",
        "Tenant-Id": "000000",
      },
    })
    .then((data: any) => {
      console.log("🚀 ~ uni.$uv.http.get ~ data:", data);
      // 保存会话
      
    });
}
</script>
  
<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.spcontent {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.welcomeText {
  font-size: x-large;
  font-weight: normal;
  display: block;
}

.spacingBar {
  border-left: 1rpx solid #c4c6c9;
  height: 100%;
  transform: scaleX(0.5);
  border-top-color: #c4c6c9;
  border-right-color: #c4c6c9;
  border-bottom-color: #c4c6c9;
  margin: 0rpx 20rpx;
}
</style>